import React, { Component } from 'react'
// 注意: 即便我们使用的是react18的版本,使用Portal技术时,引入的包依然是react-dom,而不是react-dom/client
import ReactDOM from 'react-dom'
// 需求: 不管实例化Test组件的代码写在哪里,Test的结构就要渲染到div#box这个节点里面
export default class Test extends Component {
  constructor() {
    super()
    // 1. 创建一个容器节点
    this.xxx = document.createElement('div')
  }
  render() {
    // 2. 不直接返回jsx结构,返回ReactDOM.createPortal()
    return ReactDOM.createPortal(<div>Test</div>, this.xxx)
  }

  componentDidMount() {
    // 3. 将容器节点添加到dom上
    document.getElementById('box').appendChild(this.xxx)
  }

  componentWillUnmount() {
    // 4. 在组件卸载的时候,将容器节点从dom树删除
    document.getElementById('box').removeChild()
  }
}
